<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<!doctype html>
<html lang="zh-cn">
<head>
    <title>登陆...</title>
    <meta charset="UTF-8"/>
    <script src="${pageContext.request.contextPath}/static/jquery-3.4.1.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function Value(u,d){
            $("#delete").prop("href",u+"?id="+d);
            $("#a").html("确定删除id为"+d+"的记录吗?该操作不可撤销");
        }

        function edit(u,d,name,mobile,address){
            $(".modal-body2 form").prop("action",u);
            $(".modal-body2 h5").html("你正在修改id为"+d+"的记录");
            $(".modal-body2 form input").eq(0).val(d);
            $(".modal-body2 form input").eq(1).val(name);
            $(".modal-body2 form input").eq(2).val(mobile);
            $(".modal-body2 form input").eq(3).val(address);
        }
    </script>
</head>
<body>
    <div class="root">
        <jsp:include page="header.jsp" />
        <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
            <h4>用户管理</h4>
            <h5 style="color: red">${sessionScope.msg}</h5>
            <c:remove var="msg" scope="session" />
        </div>

        <div class="container">
            <table class="table">
                <thead>
                <tr>
                    <th>name</th>
                    <th>mobile</th>
                    <th>address</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${userList}" var="data">
                    <tr>
                        <td>${data.name}</td>
                        <td>${data.mobile}</td>
                        <td>${data.address}</td>
                        <td>
                            <button type="button" class="btn btn-outline-danger btn-sm"><a data-toggle="modal" data-target="#myModal" style="color: inherit" onclick="Value('<c:url value="/user/delete"/>','${data.id}')"  href="#" >删除</a></button>
                            <button type="button" class="btn btn-outline-danger btn-sm"><a data-toggle="modal" data-target="#myModal2" style="color: inherit" onclick="edit('<c:url value="/user/edit"/>','${data.id}','${data.name}','${data.mobile}','${data.address}')"  href="#" >编辑</a></button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <!-- 删除模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title" style="color: red">警告</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body" id="a">

                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ><a href="" id="delete" style="color: inherit">确定</a></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑模态框 -->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title" style="color: red">编辑</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body2 modal-body">
                        <h5></h5>
                        <form action="header.jsp" method="post" class="needs-validation was-validated" novalidate="">
                            <input type="hidden" name="id">
                            <div class="form-group">
                                <label for="name">name:</label>
                                <input name="name" class="form-control" id="name" required>
                                <div class="invalid-feedback" style="width: 100%;">
                                    请输入用户名...
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="mobile">mobile:</label>
                                <input name="mobile" class="form-control" id="mobile" name="mobile" required pattern="0?(13|14|15|17|18)[0-9]{9}">
                                <div class="invalid-feedback" style="width: 100%;">
                                    请输入正确的手机号...
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address">address:</label>
                                <input name="address" class="form-control" id="address" required>
                                <div class="invalid-feedback" style="width: 100%;">
                                    请输入地址...
                                </div>
                            </div>
                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">确定</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
